/** 
 * 学习目标:props的子传父
 * 
 * 思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

1. 父组件提供一个回调函数（用于接收数据）
2. 将该函数作为标签属性的值，传递给子组件
3. 子组件通过 props.语法找到函数，再 调用回调函数
4. 将子组件的数据作为参数传递给回调函数
 * */
import React, { Component } from "react";

export default class App extends Component {
    state = {
        money: 1000
    }
    han = () => {
        this.setState({ money: this.state.money + 1000 })
    }
    del = (num) => {
        this.setState({ money: this.state.money + num })
    }
    render() {
        const { money } = this.state
        return <div>
            {/*  */}
            <button onClick={this.han}>加钱</button>
            <Child title={money} handel={this.del}></Child>
        </div>
    }
}

export class Child extends Component {
    render() {
        // 推荐结构props
        // const { title, fn } = this.props
        const { title, handel } = this.props
        return (
            <div>
                {/* <h1>希望接收到title：{title.name}</h1> */}
                <h1>希望接收到title：{title}</h1>
                <button onClick={() => handel(-5000)}>子组件</button>
            </div>
        )
    }
}

